(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
  typeof define === 'function' && define.amd ? define(['jquery'], factory) :
  global.crosshair = factory($);
}(this, function ($) { 'use strict';

  var crosshair = function() {
    var $cross = $('<div>')
      .css('position', 'absolute')
      .css('height', '20px')
      .css('line-height', '20px')
      .css('font-size', '12px')
      .css('color', '#080')
      .css('top', '20px')
      .css('left', '20px');

    $(document).mousemove(function(e) {
      $cross.html([e.pageX, e.pageY].join(','))
        .css('left', (e.pageX + 30) + 'px')
        .css('top', e.pageY + 'px');
    }).click(function(e) {
      $('<div>')
        .css('position', 'absolute')
        .css('height', '20px')
        .css('line-height', '20px')
        .css('font-size', '12px')
        .css('color', '#080')
        .css('top', e.pageY + 'px')
        .css('left', e.pageX + 'px')
        .html([e.pageX, e.pageY].join(','))
        .appendTo('body');
    })
    $('body').append($cross);
  }
  return crosshair;

}))
